<template>
    <div>
        <canvas
                id="canvas" height="300"
        />
    </div>
</template>

<script>

    let sun = new Image();
    let moon = new Image();
    let earth = new Image();
    export default {
        name: 'Video',
        data() {
            return {
            }
        },
        computed: {

        },
        watch: {

        },
        mounted() {
            this.initCanvas()
        },
        methods: {
            async initCanvas() { // 初始化
                sun.src = 'https://live.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_sun.png';
                moon.src = 'https://live.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_moon.png';
                earth.src = 'https://live.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_earth.png';
                window.requestAnimationFrame(this.draw);
            },
            draw() {
                // console.log('###draw')
                let canvas = document.getElementById('canvas')
                if(!canvas) {
                    return
                }

                let ctx = canvas.getContext('2d');

                ctx.globalCompositeOperation = 'destination-over';
                ctx.clearRect(0,0,300,300); // clear canvas

                ctx.fillStyle = 'rgba(0,0,0,0.4)';
                ctx.strokeStyle = 'rgba(0,153,255,0.4)';
                ctx.save();
                ctx.translate(150,150);

                // Earth
                let time = new Date();
                let angle = ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds()
                // console.log('angle:', angle)
                ctx.rotate(angle);
                ctx.translate(105,0);
                ctx.fillRect(0,-12,50,24); // Shadow
                ctx.drawImage(earth,-12,-12);

                // Moon
                ctx.save();
                ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
                ctx.translate(0,28.5);
                ctx.drawImage(moon,-3.5,-3.5);
                ctx.restore();

                ctx.restore();

                ctx.beginPath();
                ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
                ctx.stroke();

                ctx.drawImage(sun,0,0,300,300);

                window.requestAnimationFrame(this.draw);
            }
        }
    }
</script>

<style scoped>

</style>
